<template>
	<view class="page-main">
	
		<view class="navbar">
			<u-navbar :placeholder="true" leftText="" title="" auto-back>
				<template #center>
					<view style="width: 80%;" @click="searchPage">
						<u-search placeholder="搜索职位" v-model="searchWord" :showAction="false"></u-search>
					</view>
				</template>
			</u-navbar>
		</view>
		<view class="fixedTop">
			<view class="scrollList">
				<u-scroll-list :indicator="false">
					<view class="scroll-list">
						<view class="scroll-list__line" v-for="(item, index) in state.scrollJin" :key="index">
							<view class="scroll-list__line__item"
								:class="[(state.id === item.id) && 'scroll-list__line__item--no-margin-right']"
								@click="selectClass(item)">
								<image class="scroll-list__line__item__image" :src="state.id === item.id?item.url2:item.url" mode="">
								</image>
								<text class="scroll-list__line__item__text">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="DaDropdown-main">
				<DaDropdown ref="DaDropdownRef" v-model:dropdownMenu="dropdownMenuList" themeColor="#CB645E"
					textColor="#333333" :duration="300" :fixedTop="false" :menuActiveText="false" @confirm="handleConfirm"
					@close="handleClose" @open="handleOpen">
					<template #god7="{item,index}">
						<view style="padding: 40px">
							自定义插槽内容
							<switch :checked="item.value === 1" @change="(e) => handleSwitchChange(e, item,index)" />
							<text>{{ item.value === 1 ? '激活' : '未激活' }}</text>
						</view>
					</template>
				</DaDropdown>
			</view>
		</view>
		
	
		<!-- 筛选 -->
		<view class="jobCardBox">
			<job-card :list="state.list"></job-card>
		</view>
	</view>


</template>
<script lang="ts" setup>
	import jobCard from "@/components/job-card.vue"
	import DaDropdown from '@/components/da-dropdown/index.vue'
	import { ref, reactive, getCurrentInstance,watch } from 'vue'
	import { useRouter } from 'uni-mini-router'
	import { userStore } from '@/pinia';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import cityAllData from '@/common/cityAllData.js'
	import categoryList from '@/common/categoryList.js'
	let newCityData = ref(cityAllData)
	
	
	let newCategoryList = ref(categoryList)
	let obj = {
		name: '不限',
		id: '',
		chindren: []
	}
	if(newCityData.value[0].id!=''){
		newCityData.value.unshift(obj)
	}
	if(newCategoryList.value[0].id!=''){
		newCategoryList.value.unshift(obj)
	}
	
	
	const userStoreInfo = userStore();

	const userRole = userStoreInfo.userFlag
	const router = useRouter()
	let searchWord = ref('')

	let state = reactive({
		total: 0,
		pageNo: 1,
		pageSize: 10,
		areaId: '',
		cityId: '',
		provinceId: '',
		god1: '',
		brand: '',
		jobCategoryId2: '',

		id: '',
		scrollJin: [], //招聘分类
		currentObj: {},//当前选中的分类
		list: [],//招聘分类下的岗位
	})
	const DaDropdownRef = ref()
	const dropdownMenuList = ref([
		{
			title: '区域',
			type: 'picker',
			prop: 'city',
			showIcon: true,
			showAll: false,
			value:[],
			field: {
				label: 'name',
				value: 'id',
				children: 'children',
			},
			// options: newCityData.value,
			options:userStoreInfo.addressList
		},
		{
			title: '岗位',
			type: 'picker',
			prop: 'jobCategoryId2',
			showIcon: true,
			showAll: false,
			field: {
				label: 'name',
				value: 'id',
				children: 'chindren',
			},
			// syncDataFn: userStoreInfo.getZpClassifyFun,
			options: userStoreInfo.getZpClassifyList,
		},
		{
			title: '品牌',
			type: 'cell',
			prop: 'brand',
			// showAll: true,
			showIcon: true,
			options: [
				{ label: '不限', value: '' },
				{ label: '个体品牌', value: '1' },
				{ label: '区域品牌', value: '2' },
				{ label: '全国连锁品牌', value: '3' },
				{ label: '国际品牌连锁', value: '4' }
			],
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		},
		{
			title: '好评榜',
			type: 'cell',
			prop: 'god1',
			showIcon: true,
			options: [
				{ label: '不限', value: '' },
				{ label: '优秀', value: 0 },
				{ label: '良好', value: 1 },
				{ label: '普通', value: 2 }
			],
		}
	])
	const handleConfirm = (v) => {
		if (v.city) {
			if(v.city[0]!=null && JSON.stringify(v.city[0])!='{}'){
				state.areaId = (v.city && v.city.length>2)?v.city[2]:''
				state.cityId = (v.city && v.city.length>1)?v.city[1]:''
				state.provinceId = (v.city && v.city.length>0)?v.city[0]:''
			}else{
				state.areaId = ''
				state.cityId = ''
				state.provinceId = ''
				dropdownMenuList.value[0].value = []
			}
			
		} else if (v.jobCategoryId2) {
			if(v.jobCategoryId2[0]){
				state.jobCategoryId2 = v.jobCategoryId2[v.jobCategoryId2.length-1]
			}else{
				state.jobCategoryId2 = ''
			}
			
		} else {
			Object.keys(v).forEach(key => {
				state[key] = v[key]
			})
		}
		// let key = Object.keys(v)[0]


		state.list = []
		state.pageNo = 1
		getMeiyeRecruitJob2List()

	}
	const handleClose = (v) => {
		console.log('handleClose ==>', v)
	}
	const handleOpen = (v) => {
		// if (v == 0 || v == 1) {
		// 	dropdownMenuList.value[v].options.map(el => {
		// 		return el.value != null
		// 	})
		// 	// dropdownMenuList.value[v].options.forEach(el=>{
		// 	//  if(el.id == null){
		// 	//   delete el
		// 	//  }
		// 	// })
		// }
	}
	
	watch(() => userStoreInfo.getZpClassifyList,
	  (v) => {
	    console.log('watch',v)
		dropdownMenuList.value[1].options = v
	  }, { immediate: true, deep: true })
	
	const handleSwitchChange = (event, item, index) => {
		dropdownMenuList.value[index].value = event.detail.value === true ? 1 : 0
		// 操作完成后关闭弹窗
		DaDropdownRef.value?.handlePopupHide()
	}


	const getCategoryList = () => {
		proxy.$req('GET', proxy.$api.getCategoryList, {}).then((res) => {
			if (res.code === 200) {
				if(res.result && res.result.length > 0){
					let idx = res.result.findIndex(el=>el.id== checkId.value)
					if(idx!=-1){
						state.currentObj = res.result[idx]
						state.id = state.currentObj.id || ''
					}else{
						state.currentObj =res.result[0]
						state.id = state.currentObj.id || ''
					}
					
				}
				
				userStoreInfo.getZpClassifyFun(state.id)
				state.scrollJin = res.result
				getMeiyeRecruitJob2List()
			}
		})
	}



	// import filterDropdown from "@/components/filterDropdown.vue"


	const searchPage = () => {
		
		router.push({
			name: 'jobSearchPage',
			params: {
				type: 'job'
			}
		})
	}


	let confirm = (options) => {
		console.log('--confirm--', options);
	}

	const { proxy } = getCurrentInstance()

	//获取招聘分类
	const getZpClassify = () => {
		// proxy.$req('GET', proxy.$api.meiyeRecruitCategory2CategoryList2, { id: state.id }).then((res) => {
		// 	if (res.code === 200) {
		// 		let obj = {
		// 			name: '不限',
		// 			id: '',
		// 			chindren: []
		// 		}
		// 		res.result.unshift(obj)
		// 		dropdownMenuList.value[1].options = res.result


		// 	}
		// })
	}
	//获取招聘职位分页列表查询
	const getMeiyeRecruitJob2List = () => {
		let params = {
			jobCategoryId: state.id,
			pageNo: state.pageNo,
			pageSize: state.pageSize,

			areaId: state.areaId,
			cityId: state.cityId,
			provinceId: state.provinceId,

			god1: state.god1,
			brand: state.brand,
			jobCategoryId2: state.jobCategoryId2

		}
		uni.showLoading({
			title: '加载中'
		})
		proxy.$req('GET', proxy.$api.getMeiyeRecruitJob2List, params).then((res) => {
			console.log(res);
			uni.hideLoading()
			if (res.code === 200) {
				state.total = res.result.total
				state.list = state.list.concat(res.result.records)
				// state.list = res.result.records
			}
		})
	}

	// 获取地区
	const getAddressTree = () => {
		//获取地区
		// proxy.$req('GET', proxy.$api.getAddressTree, {}).then((res) => {
		// 	let obj = {
		// 		name: '不限',
		// 		id: '',
		// 		children: []
		// 	}
		// 	res.result.unshift(obj)
		// 	dropdownMenuList.value[0].options = res.result
		// })
	}
	let checkId = ref('')
	onLoad((options) => {

		let cityObj = uni.getStorageSync('cityInfo')?JSON.parse(uni.getStorageSync('cityInfo')):{}
		console.log(options.data)
		let checkObj = options.data?JSON.parse(options.data):{}
		checkId.value = checkObj.id
		
		state.areaId = cityObj.areaId || ''
		state.cityId = cityObj.cityId|| ''
		state.provinceId = cityObj.provinceId || ''
		dropdownMenuList.value[0].value=[state.provinceId,state.cityId,state.areaId]
		getCategoryList()
		
		// getZpClassify()
		// getAddressTree()
	})
	onReachBottom(() => {
		if (state.total > state.list.length) {
			state.pageNo++
			getMeiyeRecruitJob2List()
		}
	})

	const selectClass = (item) => {
		state.id = item.id
		state.currentObj = item
		dropdownMenuList.value[1].options = []
		dropdownMenuList.value[1].value = []
		
		userStoreInfo.getZpClassifyFun(state.currentObj.id)
		getZpClassify()
		state.list = []
		state.pageNo = 1
		getMeiyeRecruitJob2List()

	}
</script>
<style lang="scss" scoped>
	page {
		background: #FAFAFAFF;
		height: 100%;
	}

	.page-main {
		height: 100%;
		// overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.fixedTop{
		position:fixed;
		top:84rpx;
		left:0;
		right:0;
		z-index:10;
		background: #FAFAFAFF;
	}

	.navbar {
		width: 100%;
		height: 100rpx;
	}

	.scrollList {
		width: 90%;
		/* #ifdef APP-PLUS */
		margin: 56rpx auto 0;
		/* #endif */
		/* #ifndef APP-PLUS */
		margin: 30rpx auto 0;
		/* #endif */

		.scroll-list {
			@include flex;
			// @include flex(column);
			flex-wrap: wrap;
			width: 100%;

			&__line {
				width: 20%;
				@include flex;
				margin-top: 10rpx;

				&__item {
					@include flex(column);
					align-items: center;
					// margin-right: 42rpx;

					&__image {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						box-sizing: border-box;
					}

					&__text {
						margin-top: 5rpx;
						color: $u-content-color;
						font-size: 24rpx;
						text-align: center;
					}

					// &--no-margin-right {
					// 	margin-right: 0;

					// 	.scroll-list__line__item__image {
							
					// 		border: 2rpx solid red;
					// 	}

					// 	.scroll-list__line__item__text {
					// 		color: red;
					// 	}
					// }
				}
			}
		}
	}

	.DaDropdown-main {
		position: relative;
		border-bottom: 1rpx solid #eee;
	}

	.screening {
		width: 100%;
		height: 100rpx;
		background-color: #000;
	}

	.jobCardBox {
		margin-top:418rpx;
		overflow-y: auto;
	}
</style>